<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/common.css" />
		<style type="text/css">
			.mui-bar-nav {
				border-bottom: 1px solid #eee;
			}
			
			.orderList {
				background: #fff;
				border-bottom: 1px solid #eee;
			}
			
			.orderList_head {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				padding: 4px 14px;
				border-bottom: 1px solid #eee;
				color: #666;
				font-size: 12px;
			}
			
			.orderList_head>div {
				min-width: 50px;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.orderList_head>div:last-child {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
				text-align: right;
			}
			
			.orderList_main {
				display: -webkit-box;
				display: -ms-flexbox;
				display: -webkit-flex;
				display: flex;
				padding: 14px;
				font-size: 12px;
				color: #de2729;
				position: relative;
			}
			
			.integral_img {
				width: calc(100vw/4);
				margin-right: 14px;
				height: calc(100vw/4);
				max-width: 100px;
				max-height: 100px;
			}
			
			.integral_img>img {
				width: 100%;
				vertical-align: middle;
			}
			
			.orderList_title {
				color: #333;
				font-size: 14px;
			}
			
			.orderList_main>div>div {
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 1;
				overflow: hidden;
				word-break: break-all;
			}
			
			.orderList_main>div:last-child {
				-webkit-flex: 1;
				flex: 1;
				-webkit-box-flex: 1;
				-moz-box-flex: 1;
				-ms-flex: 1;
			}
			
			.button {
				position: absolute;
				bottom: 14px;
				right: 14px;
			}
			
			.button>button {
				padding: 0 10px;
				border-radius: 50px;
				margin: 0;
				font-size: 12px;
			}
			
			.button .mui-btn-success {
				background: #1abc9c;
				border: 1px solid #1abc9c;
			}
			
			.button .mui-btn-danger {
				background: #de2729;
				border: 1px solid #de2729;
			}
			/*数据*/
			
			.noshopp {
				display: none;
				position: absolute;
				left: 50%;
				top: 50%;
				-webkit-transform: translate(-50%, -50%);
				transform: translate(-50%, -50%);
				text-align: center;
				font-size: 12px;
				z-index: 10000;
				color: #666;
			}
			
			.noshopp img {
				margin-bottom: 30px;
				width: 50%;
			}
			
			.mui-pull-caption {
				font-weight: normal;
				font-size: 12px;
			}
		</style>
	</head>

	<body>
		<div id="orderList" v-cloak>
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">兑换记录</h1>
			</header>
			<div id="pullrefresh" class="mui-content mui-scroll-wrapper">
				<div class="mui-scroll">
					<div class="orderList" v-for="list in list" @tap.stop="openDetail(list)">
						<div class="orderList_head">
							<div v-if="list.orderStatus==0">已提交</div>
							<div v-else-if="list.orderStatus==1">已发货</div>
							<div v-else-if="list.orderStatus==2">已完成</div>
							<div v-else>已取消</div>

							<div>订单号：{{list.orderSn}}</div>
						</div>
						<div class="orderList_main" v-for="orderItemDtos in list.orderItemDtos">
							<div class="integral_img"><img :src="imgCommonUrl+orderItemDtos.prodPic" /></div>
							<div>
								<div class="orderList_title">
									{{orderItemDtos.prodName}}</div>
								<div>积分：{{orderItemDtos.exchangeIntegral}}</div>
								<div>数量：{{orderItemDtos.basketCount}}</div>
								<div class="button">
									<button type="button" class="mui-btn mui-btn-success" v-if="list.orderStatus==0" @tap.stop="orderCancel(list)">取消订单</button>
									<button type="button" class="mui-btn mui-btn-danger" v-else-if="list.orderStatus==2 || list.orderStatus==3" @tap.stop="orderDel(list)">删除订单</button>
								</div>
							</div>
						</div>
					</div>
					<div></div>
				</div>
			</div>
			<!--没有数据-->
			<div class="noshopp">
				<img src="../../images/noshop.png" alt="" />
				<div>当前并无积分订单哦！</div>
			</div>

		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto.js"></script>
		<script src="../../js/libs/vue.js"></script>
		<script src="../../js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				pullRefresh: {
					container: '#pullrefresh',
					up: {
						contentrefresh: '正在加载...',
						callback: pullupRefresh,
						auto: true
					}
				}
			});

			var orderList = new Vue({
				el: '#orderList',
				data: {
					imgCommonUrl: common.imageUrl,
					pageNum: 1,
					list: []
				},
				methods: {
					orderCancel: function(msg) {
						var btnArray = ['是', '否'];
						mui.confirm('您确定取消订单吗?', '', btnArray, function(e) {
							if(e.index == 0) {
								common.ajax('/integral/integral/orderCancel/' + msg.orderSn, {}, function(data) {
									if(data.code == 1) {
										mui('#pullrefresh').pullRefresh().refresh(true);
										orderList.list = []
										orderList.pageNum = 1
										mui('#pullrefresh').pullRefresh().pullupLoading();
										mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
									} else {
										if(data.resultMsg) {
											mui.toast(data.resultMsg)
										}
									}
								})
							}
						})
					},
					orderDel: function(msg) {
						var btnArray = ['是', '否'];
						mui.confirm('您确定删除订单吗?', '', btnArray, function(e) {
							if(e.index == 0) {
								common.ajax('/integral/integral/orderDel/' + msg.orderSn, {}, function(data) {
									if(data.code == 1) {
										mui('#pullrefresh').pullRefresh().refresh(true);
										orderList.list = []
										orderList.pageNum = 1
										mui('#pullrefresh').pullRefresh().pullupLoading();
										mui('#pullrefresh').pullRefresh().scrollTo(0, 0, 0.1);
									} else {
										if(data.resultMsg) {
											mui.toast(data.resultMsg)
										}
									}
								})
							}
						})
					},
					openDetail:function(msg){
						common.open('intergralDetail.html','intergralDetail.html',msg)
					}
				}
			})

			function pullupRefresh() {
				common.ajax('/integral/order_list', {
					curPageNO: orderList.pageNum++,
				}, function(data) {
					if(data.code == 1) {
						if(orderList.pageNum > data.data.pageCount) {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh(true);
						} else {
							mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						}
						orderList.list = orderList.list.concat(data.data.list)
						if(orderList.list.length <= 0) {
							$(".noshopp").show()
							$('.mui-pull-bottom-pocket').css('display', 'none !important')
						} else {
							$(".noshopp").hide()
							$('.mui-pull-bottom-pocket').css('display', 'block !important')
						}
					} else {
						mui('#pullrefresh').pullRefresh().endPullupToRefresh();
						if(data.resultMsg) {
							mui.toast(data.resultMsg)
						}
					}
				}, true, 'get')
			}
		</script>
	</body>

</html>